/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React, { useEffect } from 'react';
import { Form, Radio, Select, Row, Col, InputNumber, Input } from 'antd';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';
import { Panel } from '../../Components/Collapse';
import { calcsOptions } from '../../config';
import { useGlobalState } from '../../../globalState';

const colSpans = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

export default function GraphStyles() {
  const { t, i18n } = useTranslation('dashboard');
  const namePrefix = ['custom'];
  const [statFields, setStatFields] = useGlobalState('statFields');
  const fields = _.compact(_.concat(statFields, 'Value'));
  const colSpan = Form.useWatch([...namePrefix, 'colSpan']);

  useEffect(() => {
    return () => {
      setStatFields([]);
    };
  }, []);

  return (
    <Panel header={t('panel.custom.title')} data-oid='-0.cq7n'>
      <>
        <Row gutter={10} data-oid='rt4b8lf'>
          <Col span={8} data-oid='qka942g'>
            <Form.Item label={t('panel.custom.textMode')} name={[...namePrefix, 'textMode']} data-oid='avbbkzy'>
              <Radio.Group buttonStyle='solid' data-oid='qvjzzk:'>
                <Radio.Button value='valueAndName' data-oid='ce9x4um'>
                  {t('panel.custom.valueAndName')}
                </Radio.Button>
                <Radio.Button value='value' data-oid='k21ya00'>
                  {t('panel.custom.value')}
                </Radio.Button>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='-i3p46k'>
            <Form.Item label={t('panel.custom.stat.graphMode')} name={[...namePrefix, 'graphMode']} data-oid='15w6xr-'>
              <Radio.Group buttonStyle='solid' data-oid='_k1sx4r'>
                <Radio.Button value='none' data-oid='g:.agci'>
                  {t('panel.custom.stat.none')}
                </Radio.Button>
                <Radio.Button value='area' data-oid='69yapss'>
                  {t('panel.custom.stat.area')}
                </Radio.Button>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='_ejp1vd'>
            <Form.Item label={t('panel.custom.colorMode')} name={[...namePrefix, 'colorMode']} data-oid='z.o32ke'>
              <Radio.Group buttonStyle='solid' data-oid='vznjemg'>
                <Radio.Button value='value' data-oid='7jd25ga'>
                  {t('panel.custom.value')}
                </Radio.Button>
                <Radio.Button value='background' data-oid='v9:iu6s'>
                  {t('panel.custom.background')}
                </Radio.Button>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10} data-oid='1r9-vy8'>
          <Col span={8} data-oid='u628wvi'>
            <Form.Item label={t('panel.custom.calc')} name={[...namePrefix, 'calc']} tooltip={t('panel.custom.calc_tip')} data-oid='s-be3u.'>
              <Select data-oid='fxqkahd'>
                {_.map(calcsOptions, (item, key) => {
                  return (
                    <Select.Option key={key} value={key} data-oid='7-.791s'>
                      {t(`calcs.${key}`)}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='ygrus4n'>
            <Form.Item label={t('panel.custom.valueField')} name={[...namePrefix, 'valueField']} tooltip={t('panel.custom.valueField_tip')} data-oid='hpwjzyf'>
              <Select data-oid='--:753n'>
                {_.map(fields, (item) => {
                  return (
                    <Select.Option key={item} value={item} data-oid='7rky1di'>
                      {item}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='lq-sh4l'>
            <Form.Item label={t('panel.custom.colSpan')} name={[...namePrefix, 'colSpan']} tooltip={t('panel.custom.colSpanTip')} data-oid='2u6j1az'>
              <Select data-oid='r:yoiz:'>
                {_.map(colSpans, (item) => {
                  return (
                    <Select.Option key={item} value={item} data-oid='j9tcj8q'>
                      {item === 0 ? t('panel.custom.colSpanAuto') : item}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10} data-oid='l9owip1'>
          <Col span={8} data-oid='yn:.le0'>
            <Form.Item label={t('panel.custom.textSize.title')} name={[...namePrefix, 'textSize', 'title']} data-oid='5zawgmx'>
              <InputNumber placeholder='auto' style={{ width: '100%' }} min={12} max={100} data-oid='05cqu-0' />
            </Form.Item>
          </Col>
          <Col span={8} data-oid='p-3q.ya'>
            <Form.Item label={t('panel.custom.textSize.value')} name={[...namePrefix, 'textSize', 'value']} data-oid='05f_ws7'>
              <InputNumber placeholder='auto' style={{ width: '100%' }} min={12} max={100} data-oid='sd6seg7' />
            </Form.Item>
          </Col>
          <Col span={8} data-oid='usv3if7'>
            <Form.Item
              hidden={colSpan !== 0}
              label={t('panel.custom.stat.orientation')}
              name={[...namePrefix, 'orientation']}
              tooltip={t('panel.custom.stat.orientationTip')}
              data-oid='mr5zydf'
            >
              <Select
                options={[
                  {
                    label: t('panel.custom.stat.orientationValueMap.auto'),
                    value: 'auto',
                  },
                  {
                    label: t('panel.custom.stat.orientationValueMap.horizontal'),
                    value: 'horizontal',
                  },
                  {
                    label: t('panel.custom.stat.orientationValueMap.vertical'),
                    value: 'vertical',
                  },
                ]}
                data-oid='ojas04_'
              />
            </Form.Item>
          </Col>
        </Row>
      </>
    </Panel>
  );
}
